<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table id="mytable" border="1">

		</table>
		<script>
			let table = document.getElementById("mytable"); //已经表示获取了id为mytable的标签
			// console.log(document.getElementById("mytable"))
			console.log(table);
			//2.加上表头，获使用document创建元素
			let thead = document.createElement("thead");
			//将head标签的引用thead，附加到table中
			table.appendChild(thead);
			let tr = document.createElement("tr");
			thead.appendChild(tr);
			let th = document.createElement("th");
			th.innerText = "姓名";//插入文本
			// th.innerHTML = "<em>姓名</em>";//插件html代码，没有必要，就不要去用
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "语文";//插入文本
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "英语";//插入文本
			tr.appendChild(th);
			th = document.createElement("th");
			th.innerText = "数学";//插入文本
			tr.appendChild(th);
			//3.加上内容
			let tbody = document.createElement("tbody");
			table.appendChild(tbody);
			/*
				数组
					用处：保存多个数据
					定义：var/let 数组名 [= 初值];
						1.let arr = new Array();//定义了一个空数组
						2.let arr = [];//效果同上
					长度属性：length，获取数组的长度，即该数组的元素总数
						具体使用：数组名.length
					遍历：一个接一个操作，即为遍历，一般需要配合循环使用
					读取数组的元素：数组名[索引]
					下午：
						JS对数组的操作
				循环
					for(声明部分; 条件部分; 迭代部分){循环体}
					for循环
						格式：for(let i = 0; i < arr.length; i++){}
							i：表示数组的索引，索引要求>=0。
					for-in循环
						for(let item : 数组名){}
							item：表示数组中的元素
					while循环：
						格式：while(条件部分) {
							循环体
							迭代部分
						}
					do-while循环：至少会执行一次
						格式：do{
							循环体
							迭代部分
						}(条件部分);
			*/
			let arrNames = ["小明", "小红", "小杰"];
			let arrYuWens = [80, 90, 100];
			let arrYingYus = [80, 60, 100];
			let arrShuXues = [80, 90, 100];//静态赋值
			let len = arrNames.length;
			let totalYuWen = 0;
			let totalYingyu = 0;
			let totalShuXue = 0;
			for(let i = 0; i < len; i++) {
				tr = document.createElement("tr");
				tbody.appendChild(tr);
				let td = document.createElement("td");
				td.innerText = arrNames[i];
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = arrYuWens[i];
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = arrYingYus[i];
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText = arrShuXues[i];
				tr.appendChild(td);
				totalYuWen += arrYuWens[i];
				totalYingyu += arrYingYus[i];
				totalShuXue += arrShuXues[i];
			}
			
			let avgYuWen = totalYuWen / len;
			let avgYingyu = totalYingyu / len;
			let avgShuXue = totalShuXue / len;
			//思考，如何自动计算平均值？不会怎么办，等老师教？现代网络学习资源非常丰富
			//平均数
			tr = document.createElement("tr");
			tbody.appendChild(tr);
			td = document.createElement("td");
			td.innerText = "平均";
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = avgYuWen;
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = avgYingyu;
			tr.appendChild(td);
			td = document.createElement("td");
			td.innerText = avgShuXue;
			tr.appendChild(td);
			//写在函数中，然后通过html标签的事件来触发
		</script>
	</body>
</html>
